import { CSSProperties } from 'react'
import { theme } from 'antd'
import Icon from '@ant-design/icons'

import { getIconTypeName } from '../utils'
import ErrorIcon from '@/assets/icons/error.svg?react'
import MailIcon from '@/assets/icons/mail.svg?react'
import NewRouteIcon from '@/assets/icons/newRoute.svg?react'
import TimeoutIcon from '@/assets/icons/timeout.svg?react'

export const IconTypeIcon = ({
  value,
  active,
  className,
  style,
  ...props // 气泡需要
}: {
  /** 1.超时未更新 2.新原始路由 3.异常 4.待发送邮件 */
  value: number | null | undefined
  active?: boolean
  className?: string
  style?: CSSProperties
}) => {
  const { token } = theme.useToken()
  if (value != null && getIconTypeName.valueList.includes(value)) {
    const cfg = {
      1: { Comp: TimeoutIcon, activeColor: token['green-6'] },
      2: { Comp: NewRouteIcon, activeColor: token.blue },
      3: { Comp: ErrorIcon, activeColor: token.red },
      4: { Comp: MailIcon, activeColor: token.orange },
    }[value as 1 | 2 | 3 | 4]
    return (
      <Icon
        {...props}
        className={className}
        style={{ color: active ? cfg.activeColor : token.colorTextDisabled, ...style }}
        component={cfg.Comp}
      />
    )
  }
  return null
}
